<template>
      
    <h1>财务管理页面</h1>
   
    <div>
        <el-row>
            <el-select v-model="period_value" 
            class="m-2" placeholder="选择账单周期"
            @change="selectPeriod(period_value)">
                <el-option
                  v-for="item in months"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
        </el-row>
    </div>

    <div v-if="nodata">
        <el-empty :image-size="200" />
    </div>

    <div v-else>
        <el-table :data="platform_transcation_set" 
        height="600px">
            <el-table-column fixed prop="user_id" label="用户ID" width=""></el-table-column>
            <el-table-column  prop="transcation_id" label="交易流水ID" width=""></el-table-column>
            <el-table-column prop="amount" label="交易金额" width=""></el-table-column>
            <el-table-column prop="relation_id" label="关联交易用户流水ID" width=""></el-table-column>
            <el-table-column prop="io_direction" label="交易类别" width=""></el-table-column>
            <el-table-column prop="transcation_type" label="交易类型" width=""></el-table-column>
            <el-table-column prop="parent_id" label="父交易用户流水ID" width=""></el-table-column>
            <el-table-column prop="transcation_memo" label="摘要信息" width=""></el-table-column>
            <el-table-column prop="create_date" label="流水创建时间" width=""></el-table-column>
        </el-table>
        
    </div>



    <div v-if="total_page_size" >
        <el-pagination 
        @current-change="pageChange" 
        :current-page.sync="current_page"
        layout="prev, pager, next"
        :page-size=page_size
        :page-count=total_page_size
        :page-sizes="[1,10,30,50]"
        >
        </el-pagination>
    </div>


</template>
  
<script>
  
    import config from '../../spoken.config.json'
    import { ElNotification } from 'element-plus'
    import {JSEncrypt} from 'jsencrypt'
    import HeaderPage from '@/components/HeaderPage.vue'
    import FooterPage from '@/components/FooterPage.vue'
import axios from 'axios'

  export default {
    name: 'FinancialPage',
    components:{
            HeaderPage,
            FooterPage,
        },
    props: {
      msg: String
    },
    
    data(){
        return{
            isAdmin:false,
            nick_name:null,
            user_id:null,
            avatar:null,
            months:[],
            page:1,
            page_size:config.PAGE_SIZE,
            total_page_size:null,
            period_value:null,
            platform_transcation_set:[], 
            nodata:true,       
        }
  },

  created(){
    this.user_profiles();
    this.get_months();
  },

  watch:{
    
  },

  methods:{
    //页面初始化
    async user_profiles(){
                //读cookie，获取用户token
                const login_token= this.$commonFunctions.get_cookies('login_token')
                console.log("Console页面初始化数据。login_token："+login_token);
             
                const user_profiles= await this.$commonFunctions.get_user_profiles(login_token);
              
                this.nick_name=user_profiles.name
                this.avatar=user_profiles.avatar
                this.user_id=user_profiles.user_id
                this.isAdmin=user_profiles.is_superuser

                //把昵称和头像信息存到cookie里
                
                console.log("后台管理-财务页面初始化数据。用户名："+this.nick_name+" 头像地址："+this.avatar+" 管理员标识："+user_profiles.is_superuser);
             },
    
            get_months(){
                    console.log("准备生成月份数据")
                    const date=new Date();
                    console.log("当前基准日期"+date);
                    const month=date.getMonth()+1;
                    this.months=[{value:month,label:month+"月"}, {value:month-1,label:month-1+"月"},{value:month-2,label:month-2+"月"}]
                    console.log(this.months)
                },

            selectPeriod(month){
                console.log("selectPeriod: "+month)
                this.get_bill(month)
            },
            
            async get_bill(month){
                let year,day
                const date=new Date()
                if( this.months[2]-this.months[0]<0){
                    year=date.getFullYear()+1
                }else{
                    year=date.getFullYear()
                }
                
                if(month-1==0||month-3==0||month-5==0||month-8==0||month-10==0||month-12==0){
                    day=31
                }else if(month-4==0||month-6==0||month-9==0||month-11==0){
                    day=30
                }else if((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0){
                    day=29
                }else{
                    day=28
                }
                const data={
                    start:[year,month,1,0,0,0,0],
                    end:[year,month,day,23,59,59,0],
                    page:this.page,
                    page_size:config.PAGE_SIZE,
                }
                console.log(data)

                await  axios.post("/api/get_platform_financial/", data, { withCredentials: true })
                .then(response => {
                  try {
                    console.log("打印/api/get_platform_financial/出参:"+JSON.stringify(response))
                        if (response.data["code"]==20000){
                            this.nodata=false
                            this.platform_transcation_set=response.data["data"]
                        }else{
                           this.nodata=true
                        }
                    }
                  catch(err){
                          console.log(err)
                        }
                })
        },
    }
}
</script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
  
  </style>
  